<html>
<body>
<H1>Welcome to Place Finder</H1>
<form name="form" action="javascript:User_call()" method="POST">
Search for: <select id="Category" name="Cat">
  <option value="Select one">Select one</option>
  <option value="parks">parks</option>
  <option value="restaurants">restaurants</option>
  <option value="temples">temples</option>
  <option value="theaters">theaters</option>
  </select> Place:<input type="text" alt="(Eg. Banjara Hills)" id="Place"/>
  <input type="submit" value="Search by place/current location"/><br/> <br/>
  <div id="location_info"></div><br/> 
 <div id="results_status"></div><br/> 
  <div id="content"></div>
<div id="pagination"></div>

 
<table border="1" id="results">
</table>
<div id="pageNavPosition"></div>
</form>
</body>
<head>
<style type="text/css">   
           .pg-normal {
                color: black;
                font-weight: normal;
               text-decoration: none;   
               cursor: pointer;   
           }
            .pg-selected {
                color: black;
                font-weight: bold;       
                text-decoration: underline;
                cursor: pointer;
            }
            
            
table { background:#D3E4E5;
 border:1px solid gray;
 border-collapse:collapse;
 color:#fff;
 font:normal 12px verdana, arial, helvetica, sans-serif;
}
caption { border:1px solid #5C443A;
 color:#5C443A;
 font-weight:bold;
 letter-spacing:20px;
 padding:6px 4px 8px 0px;
 text-align:center;
 text-transform:uppercase;
}
td, th { color:#363636;
 padding:.4em;
}
tr { border:1px dotted gray;
}
thead th, tfoot th { background:#5C443A;
 color:#FFFFFF;
 padding:3px 10px 3px 10px;
 text-align:left;
 text-transform:uppercase;
}
tbody td a { color:#363636;
 text-decoration:none;
}
tbody td a:visited { color:gray;
 text-decoration:line-through;
}
tbody td a:hover { text-decoration:underline;
}
tbody th a { color:#363636;
 font-weight:normal;
 text-decoration:none;
}
tbody th a:hover { color:#363636;
}
tbody td+td+td+td a { background-image:url('bullet_blue.png');
 background-position:left center;
 background-repeat:no-repeat;
 color:#03476F;
 padding-left:15px;
}
tbody td+td+td+td a:visited { background-image:url('bullet_white.png');
 background-position:left center;
 background-repeat:no-repeat;
}
tbody th, tbody td { text-align:left;
 vertical-align:top;
}
tfoot td { background:#5C443A;
 color:#FFFFFF;
 padding-top:3px;
}
.odd { background:#fff;
}
tbody tr:hover { background:#99BCBF;
 border:1px solid #03476F;
 color:#000000;
}
            </style>
<script type="text/javascript" >
var pager;
function User_call()//To call User1.php using AJAX(XMLhttpRequest)
{
  xmlhttp=new XMLHttpRequest();
  xmlhttp.overrideMimeType('text/xml');
  xmlhttp.onreadystatechange=function()//is executed for every change in the readystate
  {
   
   if (xmlhttp.readyState==4)
     {   
	   
	   
	   //alert(xmlhttp.responseText);
       //alert(xmlhttp.getResponseHeader('Content-Type'));
       
       txt=xmlhttp.responseText;
       //alert(txt);
       var parser = new DOMParser();
       xmlDoc=parser.parseFromString(txt,"text/xml");
       if(xmlDoc == null){

      	 alert("XML Doc Load Failed");

      	 }

    // Check for geolocation support

      // alert("Nodename: " + xmlDoc.nodeName);
       var x=xmlDoc.getElementsByTagName("Place");
       //alert("the length of Park " + x.length);
       results_status.innerHTML= "Found "+x.length+" results for the location";
       function table(k)
       {   var s="";
           s+="<table border='1'>";
           for(i=k;i<x.length;i++)//changes i=0 to i=s; i<x.length
           {   
	             //s+="<table border='1'>";
	             s+="<tr><td><img src=\"";
	             s+=x[i].getElementsByTagName("Icon")[0].childNodes[0].nodeValue;
	             s+="\" alt=\"No Image\"/></td><td>";
	             s+=x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
	             s+="</td><td>";
	             s+=x[i].getElementsByTagName("Location")[0].childNodes[0].nodeValue;
	             s+="</td><td>";
	             s+=x[i].getElementsByTagName("Phone")[0].childNodes[0].nodeValue;
	             s+="</td><td> <a href=\"";
	             s+=x[i].getElementsByTagName("Website")[0].childNodes[0].nodeValue;             
	             s+="\">"+x[i].getElementsByTagName("Website")[0].childNodes[0].nodeValue+"</a></td></tr>";
	             //s+="</table>";
            }
             s+="</table>";
             return s; 
         }
       results.innerHTML = table(0);
       pager = new Pager('results', 10, 'pager', 'pageNavPosition');
       pager.init();
       pager.showPage(1);
       function Pager(tableName, itemsPerPage, pagerName, positionId) 
       {
    	   this.tableName = tableName;
    	   this.itemsPerPage = itemsPerPage;
    	   this.pagerName = pagerName;
    	   this.positionId = positionId;
    	   this.currentPage = 1;
    	   this.pages = 0;
    	   this.inited = false;
    	   this.numbers = new Array(10);

    	   this.showRecords = function (from, to) {
    	       var table = document.getElementById(tableName);
    	       var rows = table.rows;
    	       for (var i = 0; i < rows.length; i++) {
    	           if (i < from || i > to) 
    	            rows[i].style.display = 'none';
    	           else{ //var k= rows[i];
        	           rows[i].style.display = '';
    	           }
    	       }
    	   }
    	   this.showPage = function (pageNumber) {
    	       if (!this.inited) {
    	           alert("not inited");
    	           return;
    	       }
    	       if (this.isRedrawNeeded(pageNumber)) {
    	           var startPage = Math.floor((pageNumber - 1) * 0.1) * 10;
    	           this.showPageNav(startPage + 1);
    	       }
    	       var oldPageAnchor = document.getElementById(this.pagerName + 'pg' + this.currentPage);
    	       if (oldPageAnchor != null) {
    	           oldPageAnchor.className = 'pg-normal';
    	       }
    	       this.currentPage = pageNumber;
    	       var newPageAnchor = document.getElementById(this.pagerName + 'pg' + this.currentPage);
    	       if (newPageAnchor != null) {
        	      
    	           newPageAnchor.className = 'pg-selected';
    	       }
    	       var from = (pageNumber - 1) * itemsPerPage;
    	       var to = from + itemsPerPage - 1;
    	       this.showRecords(from, to);

    	       var pgNext = document.getElementById(this.pagerName + 'pgNext');
    	       var pgPrev = document.getElementById(this.pagerName + 'pgPrev');

    	       if (pgNext != null) {
    	           if (this.currentPage == this.pages) pgNext.style.display = 'none';
    	           else pgNext.style.display = '';
    	       }
    	       if (pgPrev != null) {
    	           if (this.currentPage == 1) pgPrev.style.display = 'none';
    	           else pgPrev.style.display = '';
    	       }
    	   }
    	   this.prev = function () {
    	       if (this.currentPage > 1) this.showPage(this.currentPage - 1);
    	   }
    	   this.next = function () {
    	       if (this.currentPage < this.pages) {
    	           this.showPage(this.currentPage + 1);
    	       }
    	   }
    	   this.init = function () {
        	  
    	       var rows = document.getElementById(tableName).rows;
    	       var records = (rows.length - 1);
    	       this.pages = Math.ceil(records / itemsPerPage);
    	       this.inited = true;
    	   }
    	   this.isRedrawNeeded = function (pageNumber) {

    	       for (var i = 0; i < this.numbers.length; i++) {
    	           if (this.numbers[i] == pageNumber) {
    	               return false;
    	           }
    	       }
    	       return true;
    	   }
    	   this.showPageNav = function (start) {
   	           if (!this.inited) {
    	            alert("not inited");
    	            return;
    	        }
    	        var element = document.getElementById(this.positionId);
    	        var loopEnd = start + 7;
    	        var index = 0;
    	        this.numbers = new Array(10);
    	        var pagerHtml = ' ';
    	        if (this.pages > 2) {
    	            pagerHtml += '<span id="' + this.pagerName + 'pgPrev" onclick="' + this.pagerName + '.prev();" class="pg-normal"> << Prev </span>';
    	        }
    	        for (var page = start; page <= loopEnd; page++) {
    	            if (page > this.pages) {
    	                break;
    	            }
    	            this.numbers[index] = page;
    	            pagerHtml += '<span id="' + this.pagerName + 'pg' + page + '" class="pg-normal" onclick="' + this.pagerName + '.showPage(' + page + ');">' + page + '</span>';
    	            if (page != loopEnd) {
    	                pagerHtml += '   ';
    	            }
    	            index++;
    	        }
    	        page--;
    	        if (this.pages > page) {
    	            pagerHtml += '<span class="regularDataBlue">...</span>';
    	        }
    	        pagerHtml += '<span id="' + this.pagerName + 'pgNext" onclick="' + this.pagerName + '.next();" class="pg-normal"> Next >></span>';
    	        element.innerHTML = pagerHtml;
                
    	    }
         }
  }
  }
  if (navigator.geolocation) {
     	// Use method getCurrentPosition to get coordinates
     	navigator.geolocation.getCurrentPosition(function (position) {
     		  xmlhttp.open("POST","http://localhost/server/User1.php",true);
     		  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST variables cannot be read without this
     		  xmlhttp.setRequestHeader("Content-type", "text/xml");
     		  var cat=document.getElementById('Category').value;//gets the value chosen in the form
			  var place = document.getElementById('Place').value;

			  //alert(place);
			  if(place != "")
			  {
 			 document.getElementById('results_status').innerHTML="Searching for "+cat+" at "+place+" Please wait ...";
			  }
			  else
			  {
  			  //document.getElementById('location_info').innerHTML="<b>Current Geolocation Info:</b> Lat: "+position.coords.latitude+", Lon:"+position.coords.longitude;
		      document.getElementById('results_status').innerHTML="Searching for "+cat+" at Lat:"+position.coords.latitude
		      +" Lon:"+position.coords.longitude+" Please wait...";			  
			  }
			  
			  

			 
     		  var lat = position.coords.latitude;
     		  var lon = position.coords.longitude;
     		  
     		  //create pairs index=value with data that must be sent to server
     		  var  loc_details = 'latitude='+lat+'&longitude='+lon+'&Cat='+cat
				if(place !="")
				{
					loc_details+='&place='+place;//to send these values as parameters of SEND method
				}
     		  //var  params = 'latitude='+document.getElementById('latitude').value;
     		  //var params=('latitude'=+document.form.latitude.value);
     		  var x=xmlhttp.readyState;
     		  xmlhttp.send(loc_details);
     	});
     }

 }
</script>
</head>
</html>
